<script>
    $(".search-dropdown-button").on('click', function () {
        $("#searchDropDown").width($("#searchDropDownParent").width());
    });
    $('#searchDropDown').on('click', "[data-stop-propagation]", function (e) {
        e.stopPropagation();
    });

    //stop date picker's event bubling
    $(document).on('click.dropdown touchstart.dropdown.data-api', '#ui-datepicker-div', function (e) {
        e.stopPropagation();
    });

    $(window).resize(function () {
        $("#searchDropDown").width($("#searchDropDownParent").width());
    });
</script>

<span id="showLeftBar" class="hideInPrint">
    <a href="javascript:dhis2.leftBar.showAnimated()" title="$i18n.getString('show_menu' )"><i class="fa fa-arrow-right leftBarIcon"></i></a>
</span>

<div id="leftBar">
    
    <d2-left-bar></d2-left-bar>
    
    <div id="orgUnitTree">
        <ul>
        </ul>
    </div>
    
    <img id="ouwt_loader" src="../images/ajax-loader-bar.gif" alt="{{'in_progress'| translate}}"/>
    
    <div class="small-horizontal-spacing" ng-if="!treeLoaded">
        {{'loading_tree'| translate}}
    </div>
    
</div>

<div class="page add-default-right-padding" id="mainPage">

    <!--- selected org unit begins -->
    <input type="text" selected-org-unit ng-model="selectedOrgUnit.displayName" ng-hide=true>
    <!--- selected org unit ends  -->
        
    <div ng-if="treeLoaded && !selectedOrgUnit" class="row col-sm-12">
        <img src="../images/ajax-loader-bar.gif" alt="{{'in_progress'| translate}}"/><br>
        {{'loading_metadata'| translate}}
    </div> 

    <div ng-show="selectedOrgUnit && selectedOrgUnit.id">
        
        <!-- top bar begins -->
        <div class="top-bar row">        
            <div class="col-sm-12">                
                {{trackerCaptureLabel}}                
            </div>        
        </div>
        <!-- top bar ends -->
        
        <!--- search and registration menu begins -->        
        <div class="row">
            
            <!-- program selection begins -->
            <div class="col-md-4 small-vertical-spacing hideInPrint">
                <ui-select ng-model="parent.selectedProgram" 
                        theme="select2" 
                        on-select="setProgram(parent.selectedProgram)"
                        style="width:100%;">
                    <ui-select-match allow-clear="true" class="form-control-ui-select" placeholder="{{'select_or_search' | translate}}">{{$select.selected.displayName  || $select.selected}}</ui-select-match>
                    <ui-select-choices  repeat="program in programs | filter:{displayName:$select.search} | limitTo:maxOptionSize">
                        <span ng-bind-html="program.displayName | highlight: $select.search"></span>
                    </ui-select-choices>
                </ui-select>
            </div>            
            <!-- program selection ends -->

            <!--search/registration buttons begin-->
            <div class="col-md-4 trim hideInPrint">            
                <button type="button"
                        class="btn btn-primary"
                        ng-disabled="showRegistration || selectedOrgUnit.closedStatus"
                        ng-click="showHideRegistration()">
                    {{'register' | translate}}
                </button>
            </div>
            <!--search/registration buttons end-->            
            
        </div>
        <!--- search and registration menu ends -->    
        
        <!--registration form begins -->
        <div class="row">
            <div class="col-sm-4 bordered-div container-min-width add-default-padding" ng-show="showRegistration" ng-include="'components/registration/registration.html'"></div>
            <div class="col-sm-12" ng-show="!showRegistration" ng-include="'views/tei-home.html'"></div>
        </div>        
        <!-- registration form ends -->

</div>           


